<template>
    <div class="layout">
        <div class="head">
            <div class="logo">
                <img style="padding-left:13px" src="../assets/imgs/b.png"  alt="">
            </div>
             <div class="search">
            search
        </div>
        <div class="user">
            <div class="photo">
                <div class="avatar">
                    <el-avatar :size="40" src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" />
                </div>
            </div>
            <div class="account">
                <div class="name">
                    {{ data.user.name }}
                </div>
                <div class="loginout">
                    <el-popconfirm title="确认退出吗？" @confirm="events.loginOut">
                        <template #reference>
                            退出
                        </template>
                    </el-popconfirm>

                </div>
            </div>
        </div>
        </div>
        <div class="body">
            <div class="body-menu">
                <mymenu></mymenu>
            </div>
            <div class="body-page">

            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {start_loading,close_loading} from '../utils/notice'
import {remove_token} from '../utils/auth'
import {reactive} from 'vue'
import {useRouter} from 'vue-router'
import mymenu from '../components/layout/mymenu.vue'
interface Data{
    user:{
        account:string;
        name:string;
    }
    
}
const router=useRouter();
const data = reactive<Data>({
    user: JSON.parse(sessionStorage.getItem("user") || "{}")
});

const events = {
    loginOut() {
        start_loading();
        remove_token();
        router.push('/login');
        close_loading();
    }
}
</script>

<style scoped>
.layout{
    height: 100vh;
    width: 100vw;
}
.head{
    display: flex;
}
.head{
    height: 100px;
    width: 100%;
   border-bottom:1px solid #eee ;
}
.body{
    height: calc(100vh - 100px);
    width: 100%;
   
}
.body-menu{
    width: 200px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    height: 100%;
}
.logo{
        
    top: -12px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    height: 95px;
    display: flex;
    width:200px;
}
.search {
    flex: 1;
}

.user {
    width: 300px;
    display: flex;
    justify-content: right;
    padding-right: 40px;
    padding-top: 16px;
}

.photo {
    margin-right: 8px;
    padding-top: 10px;
}

.account {
    line-height: 60px;
    display: flex;
}

.avatar {
    cursor: pointer;
}

.name {
    cursor: pointer;
    margin-right: 8px;
    color: rgba(63, 120, 185, 0.64);
    font-weight: bold;
}

.loginout {
    font-size: 12px;
    color: gray;
    cursor: pointer;
}

.loginout:hover {
    text-decoration: underline;
}
</style>